<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MutiMenu</title>
	<style>
		.fl{
			float: left;
		}
		div{
			height: 100px;
			position: relative;
		}
		ul{
			list-style: none;

		}
		.first>li{
			float: left;
			background-color: steelblue;
			padding: 10px;
			color:white;
		}
		.second0{
			background-color: steelblue;
			padding: 11px;
			color:white;			
			position: absolute;
			top: 25px;
			left: 40px;
			display: none;			
		}
		.second1{
			background-color: steelblue;
			padding: 11px;
			color:white;			
			position: absolute;
			top: 25px;
			left: 135px;
			display: none;
		}
		.second2{
			background-color: steelblue;
			padding: 11px;
			color:white;			
			position: absolute;
			top: 25px;
			left: 225px;
			display: none;
		}
	</style>
</head>
<body>
	<div>
		<ul class="first">
			<li>一级菜单1</li>
			<li>一级菜单2</li>
			<li>一级菜单3</li>
		</ul>
		<ul class="second0">
			<li>二级菜单1</li>
			<li>二级菜单2</li>
			<li>二级菜单3</li>
		</ul>
		<ul class="second2">
			<li>二级菜单1</li>
			<li>二级菜单2</li>
			<li>二级菜单3</li>
		</ul>
		<ul class="second1">
			<li>二级菜单1</li>
			<li>二级菜单2</li>
			<li>二级菜单3</li>
		</ul>
	</div>
	<script>
		var first=document.querySelector('.first');
		console.log(first);
		var flis=first.getElementsByTagName('li');
		for (var i = 0; i < flis.length; i++) {
			flis[i].index=i;
			flis[i].onmouseover=function(argument) {
				// body...
				var second=document.querySelector('.second'+this.index);
				second.style='display:block';
			}
			flis[i].onmouseout=function(){
				var second=document.querySelector('.second'+this.index);
				second.style='display:none';				
			}
		}
	</script>
</body>
</html>